<template>
  <div class="product-detail-container">
    <!-- 返回按钮 -->
    <div class="back-button-container">
      <router-link to="/products" class="back-button">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <polyline points="15 18 9 12 15 6"></polyline>
        </svg>
        返回产品列表
      </router-link>
    </div>

    <!-- 产品主信息区 -->
    <div class="product-main-info">
      <!-- 产品图片区 -->
      <div class="product-images">
        <div class="main-image-container">
          <img :src="mainImageUrl" :alt="product.name" class="main-image" />
        </div>
        <div class="thumbnail-images">
          <div 
            v-for="(image, index) in product.images" 
            :key="index"
            class="thumbnail-container"
            :class="{ active: activeThumbnailIndex === index }"
            @click="activeThumbnailIndex = index"
          >
            <img :src="image" :alt="`${product.name} ${index + 1}`" class="thumbnail-image" />
          </div>
        </div>
      </div>

      <!-- 产品信息区 -->
      <div class="product-info">
        <div class="product-breadcrumb">
          <router-link to="/">首页</router-link>
          <span class="separator">/</span>
          <router-link :to="`/products?category=${product.category}`">{{ product.category }}</router-link>
          <span class="separator">/</span>
          <span>{{ product.name }}</span>
        </div>

        <h1 class="product-name">{{ product.name }}</h1>

        <div class="product-rating">
          <div class="rating-stars">
            <svg v-for="i in 5" :key="i" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" :style="{ color: i <= product.rating ? '#ffc107' : '#e0e0e0' }">
              <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
            </svg>
          </div>
          <span class="rating-count">({{ product.reviews }} 评价)</span>
        </div>

        <div class="price-section">
          <div class="price-container">
            <span class="current-price">¥{{ product.price }}</span>
            <span v-if="product.originalPrice" class="original-price">¥{{ product.originalPrice }}</span>
            <span v-if="product.discount" class="discount-badge">省¥{{ product.discount }}</span>
          </div>
          <div v-if="product.stock > 0" class="stock-info">
            <span class="stock-label">库存:</span>
            <span class="stock-count">{{ product.stock }} 件</span>
          </div>
          <div v-else class="stock-info out-of-stock">
            <span>缺货</span>
          </div>
        </div>

        <div class="product-description">
          <p>{{ product.description }}</p>
        </div>

        <!-- 购买选项 -->
        <div class="purchase-options" v-if="product.options && product.options.length > 0">
          <div v-for="option in product.options" :key="option.name" class="option-group">
            <label>{{ option.name }}:</label>
            <div class="option-values">
              <button
                v-for="value in option.values"
                :key="value"
                class="option-value-button"
                :class="{ selected: selectedOptions[option.name] === value }"
                @click="selectedOptions[option.name] = value"
              >
                {{ value }}
              </button>
            </div>
          </div>
        </div>

        <!-- 数量选择 -->
        <div class="quantity-selector">
          <label>数量:</label>
          <div class="quantity-controls">
            <button class="quantity-btn decrease" @click="decreaseQuantity" :disabled="quantity <= 1">-
            </button>
            <input type="number" v-model.number="quantity" min="1" :max="product.stock || 999" class="quantity-input" />
            <button class="quantity-btn increase" @click="increaseQuantity" :disabled="product.stock && quantity >= product.stock">+
            </button>
          </div>
        </div>

        <!-- 操作按钮 -->
        <div class="action-buttons">
          <button class="btn-primary add-to-cart" @click="addToCart" :disabled="product.stock === 0">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="9" cy="21" r="1"></circle>
              <circle cx="20" cy="21" r="1"></circle>
              <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
            </svg>
            加入购物车
          </button>
          <button class="btn-secondary buy-now" @click="buyNow" :disabled="product.stock === 0">
            立即购买
          </button>
        </div>

        <!-- 服务保障 -->
        <div class="service-guarantees">
          <div class="guarantee-item">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <polyline points="20 6 9 17 4 12"></polyline>
            </svg>
            <span>正品保障</span>
          </div>
          <div class="guarantee-item">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <polyline points="20 6 9 17 4 12"></polyline>
            </svg>
            <span>7天无理由退换</span>
          </div>
          <div class="guarantee-item">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <polyline points="20 6 9 17 4 12"></polyline>
            </svg>
            <span>满99元免运费</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 产品详情标签页 -->
    <div class="product-details-tabs">
      <div class="tabs-header">
        <button 
          class="tab-button" 
          :class="{ active: activeTab === 'specs' }"
          @click="activeTab = 'specs'"
        >
          规格参数
        </button>
        <button 
          class="tab-button" 
          :class="{ active: activeTab === 'details' }"
          @click="activeTab = 'details'"
        >
          产品详情
        </button>
        <button 
          class="tab-button" 
          :class="{ active: activeTab === 'reviews' }"
          @click="activeTab = 'reviews'"
        >
          用户评价 ({{ product.reviews }})
        </button>
      </div>

      <div class="tabs-content">
        <!-- 规格参数 -->
        <div v-if="activeTab === 'specs'" class="specs-content">
          <div class="specs-table">
            <div class="spec-row" v-for="(value, key) in product.specs" :key="key">
              <div class="spec-key">{{ key }}</div>
              <div class="spec-value">{{ value }}</div>
            </div>
          </div>
        </div>

        <!-- 产品详情 -->
        <div v-if="activeTab === 'details'" class="details-content">
          <div class="detail-image">
            <img :src="product.detailImage" :alt="`${product.name} 详情`" />
          </div>
          <div class="detail-text">
            <h3>{{ product.name }} 详细介绍</h3>
            <p>{{ product.fullDescription }}</p>
            <ul class="feature-list">
              <li v-for="(feature, index) in product.features" :key="index">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <polyline points="20 6 9 17 4 12"></polyline>
                </svg>
                {{ feature }}
              </li>
            </ul>
          </div>
        </div>

        <!-- 用户评价 -->
        <div v-if="activeTab === 'reviews'" class="reviews-content">
          <div class="reviews-summary">
            <div class="overall-rating">
              <span class="rating-score">{{ product.rating }}</span>
              <div class="rating-stars-large">
                <svg v-for="i in 5" :key="i" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" :style="{ color: i <= product.rating ? '#ffc107' : '#e0e0e0' }">
                  <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
                </svg>
              </div>
              <span class="rating-text">综合评分</span>
            </div>
            <div class="rating-distribution">
              <div class="rating-bar" v-for="i in 5" :key="i">
                <span class="rating-label">{{ i }}星</span>
                <div class="rating-progress-container">
                  <div 
                    class="rating-progress-bar" 
                    :style="{ width: getRatingPercentage(i) + '%' }"
                  ></div>
                </div>
                <span class="rating-percentage">{{ getRatingPercentage(i) }}%</span>
              </div>
            </div>
          </div>

          <div class="review-list">
            <div v-for="(review, index) in reviews" :key="index" class="review-item">
              <div class="review-header">
                <div class="reviewer-info">
                  <span class="reviewer-name">{{ review.userName }}</span>
                  <div class="reviewer-rating">
                    <svg v-for="i in 5" :key="i" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" :style="{ color: i <= review.rating ? '#ffc107' : '#e0e0e0' }">
                      <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
                    </svg>
                  </div>
                </div>
                <span class="review-date">{{ review.date }}</span>
              </div>
              <div class="review-content">
                <p>{{ review.content }}</p>
                <div v-if="review.images && review.images.length > 0" class="review-images">
                  <img v-for="(img, imgIndex) in review.images" :key="imgIndex" :src="img" :alt="`Review image ${imgIndex + 1}`" class="review-image" />
                </div>
              </div>
              <div v-if="review.options" class="review-options">
                <span v-for="(value, key) in review.options" :key="key" class="review-option">
                  {{ key }}: {{ value }}
                </span>
              </div>
            </div>
          </div>

          <div class="load-more-reviews" v-if="hasMoreReviews">
            <button class="btn-load-more" @click="loadMoreReviews">
              加载更多评价
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 相关产品 -->
    <div class="related-products" v-if="relatedProducts && relatedProducts.length > 0">
      <h3>相关推荐</h3>
      <div class="related-products-list">
        <div v-for="related in relatedProducts" :key="related.id" class="related-product-item">
          <router-link :to="`/products/${related.id}`" class="related-product-link">
            <div class="related-product-image">
              <img :src="related.image" :alt="related.name" />
            </div>
            <div class="related-product-info">
              <h4 class="related-product-name">{{ related.name }}</h4>
              <div class="related-product-price">¥{{ related.price }}</div>
              <div class="related-product-rating">
                <svg v-for="i in 5" :key="i" width="12" height="12" viewBox="0 0 24 24" fill="currentColor" :style="{ color: i <= related.rating ? '#ffc107' : '#e0e0e0' }">
                  <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
                </svg>
                <span>{{ related.rating }}</span>
              </div>
            </div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const productId = ref(parseInt(route.params.id) || 1)
const quantity = ref(1)
const activeThumbnailIndex = ref(0)
const selectedOptions = ref({})
const activeTab = ref('specs')
const reviews = ref([])
const hasMoreReviews = ref(true)

// 模拟产品数据
const product = ref({
  id: 1,
  name: '智能手表 Pro Max',
  price: 1999,
  originalPrice: 2499,
  discount: 500,
  category: '电子产品',
  description: '全新旗舰智能手表，支持心率监测、血氧检测、睡眠分析等多种健康功能，50米防水，最长可达14天续航。',
  fullDescription: '这款智能手表Pro Max是我们最新推出的旗舰产品，采用了1.9英寸AMOLED高清触控屏，分辨率高达454x454，显示效果细腻清晰。表身采用航空级铝合金材质，搭配陶瓷表背，既轻盈又耐用。表带采用柔软舒适的硅胶材质，适合长时间佩戴。\n\n在功能方面，这款手表支持心率监测、血氧饱和度检测、睡眠分析、压力监测、呼吸训练等多种健康功能，让您全面了解自己的健康状况。同时，它还支持100+种运动模式，包括跑步、游泳、骑行等，满足您不同的运动需求。\n\n电池续航方面，搭载了420mAh大容量电池，配合智能功耗管理系统，最长可达14天续航。支持磁吸式无线充电，充电速度快，使用方便。\n\n此外，还支持NFC支付、消息提醒、天气预报、音乐控制等实用功能，是您日常生活的得力助手。',
  images: [
    'https://picsum.photos/id/1/800/800',
    'https://picsum.photos/id/21/800/800',
    'https://picsum.photos/id/31/800/800',
    'https://picsum.photos/id/41/800/800'
  ],
  detailImage: 'https://picsum.photos/id/51/1200/600',
  rating: 4.8,
  reviews: 256,
  stock: 120,
  features: [
    '1.9英寸AMOLED高清触控屏，分辨率454x454',
    '支持心率、血氧、睡眠、压力等健康监测',
    '50米防水等级，适合游泳佩戴',
    '最长14天续航，磁吸式无线充电',
    '支持100+种运动模式',
    'NFC支付、消息提醒、天气预报等功能',
    '航空级铝合金表身，陶瓷表背',
    '兼容iOS 11.0+和Android 6.0+系统'
  ],
  specs: {
    '品牌': '智能科技',
    '型号': 'Watch Pro Max',
    '屏幕尺寸': '1.9英寸',
    '屏幕类型': 'AMOLED高清触控屏',
    '分辨率': '454x454像素',
    '表壳材质': '航空级铝合金',
    '表背材质': '陶瓷',
    '表带材质': '硅胶',
    '防水等级': '5ATM（50米）',
    '电池容量': '420mAh',
    '续航时间': '7-14天',
    '充电方式': '磁吸式无线充电',
    '连接方式': '蓝牙5.2，Wi-Fi',
    '兼容系统': 'iOS 11.0+，Android 6.0+',
    '产品尺寸': '46 x 46 x 10.7mm',
    '产品重量': '约45g（不含表带）',
    '健康功能': '心率监测、血氧检测、睡眠分析、压力监测、呼吸训练',
    '运动模式': '100+种运动模式',
    '其他功能': 'NFC支付、消息提醒、天气预报、音乐控制、闹钟、计时器'
  },
  options: [
    {
      name: '颜色',
      values: ['曜石黑', '深空灰', '钛金灰', '陶瓷白']
    },
    {
      name: '表带',
      values: ['硅胶表带', '米兰尼斯表带', '编织表带']
    }
  ]
})

// 相关产品数据
const relatedProducts = ref([
  {
    id: 2,
    name: '无线蓝牙耳机 Pro',
    price: 899,
    image: 'https://picsum.photos/id/2/400/400',
    rating: 4.6
  },
  {
    id: 3,
    name: '智能音箱 Mini',
    price: 599,
    image: 'https://picsum.photos/id/3/400/400',
    rating: 4.5
  },
  {
    id: 4,
    name: '智能台灯',
    price: 299,
    image: 'https://picsum.photos/id/4/400/400',
    rating: 4.4
  },
  {
    id: 5,
    name: '运动手环',
    price: 199,
    image: 'https://picsum.photos/id/5/400/400',
    rating: 4.7
  }
])

// 计算当前显示的主图
const mainImageUrl = computed(() => {
  return product.value.images[activeThumbnailIndex.value] || product.value.images[0]
})

// 初始化选项
const initializeOptions = () => {
  if (product.value.options) {
    product.value.options.forEach(option => {
      selectedOptions.value[option.name] = option.values[0]
    })
  }
}

// 加载评价数据
const loadReviews = () => {
  // 模拟评价数据
  reviews.value = [
    {
      userName: '李先生',
      date: '2023-06-15',
      rating: 5,
      content: '手表非常漂亮，功能也很齐全。健康监测非常准确，续航也很给力，充一次电可以用10天左右。推荐购买！',
      images: ['https://picsum.photos/id/61/300/300'],
      options: {
        '颜色': '曜石黑',
        '表带': '硅胶表带'
      }
    },
    {
      userName: '张女士',
      date: '2023-06-10',
      rating: 4,
      content: '整体来说很满意，唯一的小缺点是手表有点大，对女生来说可能不太合适。不过功能真的很强大，支持的运动模式很多。',
      options: {
        '颜色': '陶瓷白',
        '表带': '米兰尼斯表带'
      }
    },
    {
      userName: '王先生',
      date: '2023-06-05',
      rating: 5,
      content: '这款手表的做工非常精致，屏幕显示效果很好，触控也很灵敏。电池续航比我之前用的其他品牌要好很多，非常满意！',
      images: ['https://picsum.photos/id/62/300/300', 'https://picsum.photos/id/63/300/300'],
      options: {
        '颜色': '钛金灰',
        '表带': '编织表带'
      }
    }
  ]
}

// 获取评分百分比（模拟数据）
const getRatingPercentage = (star) => {
  const ratingData = {
    5: 65,
    4: 25,
    3: 8,
    2: 1,
    1: 1
  }
  return ratingData[star] || 0
}

// 增加数量
const increaseQuantity = () => {
  if (!product.value.stock || quantity.value < product.value.stock) {
    quantity.value++
  }
}

// 减少数量
const decreaseQuantity = () => {
  if (quantity.value > 1) {
    quantity.value--
  }
}

// 加入购物车
const addToCart = () => {
  alert(`已成功将${quantity.value}件${product.value.name}加入购物车！`)
}

// 立即购买
const buyNow = () => {
  alert(`即将购买${quantity.value}件${product.value.name}，请确认订单信息。`)
}

// 加载更多评价
const loadMoreReviews = () => {
  // 模拟加载更多评价
  const moreReviews = [
    {
      userName: '赵女士',
      date: '2023-06-01',
      rating: 4,
      content: '手表的颜值很高，功能也很实用。NFC支付很方便，消息提醒也很及时。就是价格有点小贵，不过物有所值。',
      options: {
        '颜色': '深空灰',
        '表带': '硅胶表带'
      }
    },
    {
      userName: '陈先生',
      date: '2023-05-28',
      rating: 5,
      content: '作为一个运动爱好者，这款手表真的很适合我。支持的运动模式很多，数据也很准确。续航也不错，一周充一次电就够了。',
      images: ['https://picsum.photos/id/64/300/300'],
      options: {
        '颜色': '曜石黑',
        '表带': '编织表带'
      }
    }
  ]
  reviews.value = [...reviews.value, ...moreReviews]
  hasMoreReviews.value = false
}

onMounted(() => {
  initializeOptions()
  loadReviews()
})
</script>

<style scoped>
d:\vue3\lx1\src\views\ProductDetailPage.vue
.product-detail-container {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

/* 返回按钮 */
.back-button-container {
  margin-bottom: 20px;
}

.back-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #667eea;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.back-button:hover {
  color: #764ba2;
}

/* 产品主信息区 */
.product-main-info {
  display: flex;
  gap: 40px;
  margin-bottom: 60px;
  flex-wrap: wrap;
}

/* 产品图片区 */
.product-images {
  flex: 1;
  min-width: 300px;
}

.main-image-container {
  background-color: #f8f9fa;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}

.main-image {
  max-width: 100%;
  max-height: 400px;
  object-fit: contain;
  border-radius: 8px;
}

.thumbnail-images {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 10px;
}

.thumbnail-container {
  flex: 0 0 auto;
  width: 80px;
  height: 80px;
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.thumbnail-container:hover {
  border-color: #667eea;
}

.thumbnail-container.active {
  border-color: #667eea;
  background-color: #e0e7ff;
}

.thumbnail-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

/* 产品信息区 */
.product-info {
  flex: 1;
  min-width: 300px;
}

.product-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 15px;
}

.product-breadcrumb a {
  color: #667eea;
  text-decoration: none;
}

.product-breadcrumb a:hover {
  text-decoration: underline;
}

.separator {
  color: #ccc;
}

.product-name {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 15px;
  color: #333;
  line-height: 1.3;
}

.product-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.rating-stars {
  display: flex;
  gap: 2px;
}

.rating-count {
  font-size: 0.9rem;
  color: #666;
}

/* 价格区域 */
.price-section {
  margin-bottom: 25px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 12px;
}

.price-container {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.current-price {
  font-size: 2.2rem;
  font-weight: bold;
  color: #ff4757;
}

.original-price {
  font-size: 1.2rem;
  color: #999;
  text-decoration: line-through;
}

.discount-badge {
  background-color: #ff4757;
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 500;
}

.stock-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
}

.stock-label {
  color: #666;
}

.stock-count {
  color: #2ecc71;
  font-weight: 500;
}

.out-of-stock {
  color: #ff4757;
  font-weight: 500;
}

/* 产品描述 */
.product-description {
  margin-bottom: 25px;
  color: #666;
  line-height: 1.6;
}

/* 购买选项 */
.purchase-options {
  margin-bottom: 25px;
}

.option-group {
  margin-bottom: 20px;
}

.option-group label {
  display: block;
  margin-bottom: 10px;
  font-weight: 500;
  color: #333;
}

.option-values {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.option-value-button {
  padding: 8px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 6px;
  background-color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.95rem;
}

.option-value-button:hover {
  border-color: #667eea;
  color: #667eea;
}

.option-value-button.selected {
  border-color: #667eea;
  background-color: #667eea;
  color: white;
}

/* 数量选择器 */
.quantity-selector {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 25px;
}

.quantity-selector label {
  font-weight: 500;
  color: #333;
  min-width: 40px;
}

.quantity-controls {
  display: flex;
  align-items: center;
  border: 2px solid #e0e0e0;
  border-radius: 6px;
  overflow: hidden;
}

.quantity-btn {
  width: 36px;
  height: 36px;
  border: none;
  background-color: #f8f9fa;
  cursor: pointer;
  font-size: 1.2rem;
  transition: all 0.3s ease;
  color: #666;
}

.quantity-btn:hover:not(:disabled) {
  background-color: #e0e7ff;
  color: #667eea;
}

.quantity-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.quantity-input {
  width: 60px;
  height: 36px;
  border: none;
  text-align: center;
  font-size: 1rem;
  outline: none;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  gap: 15px;
  margin-bottom: 25px;
  flex-wrap: wrap;
}

.btn-primary,
.btn-secondary {
  padding: 15px 30px;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 160px;
}

.btn-primary {
  background-color: #667eea;
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background-color: #764ba2;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-secondary {
  background-color: #ff4757;
  color: white;
}

.btn-secondary:hover:not(:disabled) {
  background-color: #ff3742;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 71, 87, 0.4);
}

.btn-primary:disabled,
.btn-secondary:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
  box-shadow: none;
}

/* 服务保障 */
.service-guarantees {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.guarantee-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #666;
  font-size: 0.9rem;
}

/* 产品详情标签页 */
.product-details-tabs {
  margin-bottom: 60px;
}

.tabs-header {
  display: flex;
  gap: 0;
  border-bottom: 2px solid #e0e0e0;
  margin-bottom: 30px;
}

.tab-button {
  padding: 15px 30px;
  border: none;
  background-color: white;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  color: #666;
  border-bottom: 3px solid transparent;
  transition: all 0.3s ease;
}

.tab-button:hover {
  color: #667eea;
}

.tab-button.active {
  color: #667eea;
  border-bottom-color: #667eea;
  font-weight: 600;
}

/* 规格参数内容 */
.specs-content {
  background-color: #f8f9fa;
  border-radius: 12px;
  padding: 30px;
}

.specs-table {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 15px;
}

.spec-row {
  display: flex;
  padding: 15px 0;
  border-bottom: 1px solid #e0e0e0;
  flex-wrap: wrap;
}

.spec-key {
  min-width: 120px;
  font-weight: 500;
  color: #666;
  margin-right: 15px;
}

.spec-value {
  color: #333;
  flex: 1;
}

/* 产品详情内容 */
.details-content {
  line-height: 1.8;
  color: #666;
}

.detail-image {
  margin-bottom: 30px;
  text-align: center;
}

.detail-image img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.detail-text h3 {
  font-size: 1.5rem;
  margin-bottom: 20px;
  color: #333;
}

.feature-list {
  margin-top: 20px;
  padding-left: 20px;
}

.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 15px;
  color: #333;
}

/* 用户评价内容 */
.reviews-content {
  margin-bottom: 30px;
}

.reviews-summary {
  display: flex;
  gap: 40px;
  margin-bottom: 40px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 12px;
  flex-wrap: wrap;
}

.overall-rating {
  text-align: center;
  flex: 0 0 auto;
}

.rating-score {
  display: block;
  font-size: 3rem;
  font-weight: bold;
  color: #ff4757;
  margin-bottom: 10px;
}

.rating-stars-large {
  display: flex;
  gap: 2px;
  justify-content: center;
  margin-bottom: 5px;
}

.rating-text {
  font-size: 0.9rem;
  color: #666;
}

.rating-distribution {
  flex: 1;
  min-width: 300px;
}

.rating-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.rating-label {
  width: 30px;
  text-align: right;
  font-size: 0.9rem;
  color: #666;
}

.rating-progress-container {
  flex: 1;
  height: 8px;
  background-color: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}

.rating-progress-bar {
  height: 100%;
  background-color: #ffc107;
  border-radius: 4px;
}

.rating-percentage {
  width: 40px;
  text-align: left;
  font-size: 0.9rem;
  color: #666;
}

/* 评价列表 */
.review-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.review-item {
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 12px;
}

.review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  flex-wrap: wrap;
  gap: 10px;
}

.reviewer-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.reviewer-name {
  font-weight: 600;
  color: #333;
}

.reviewer-rating {
  display: flex;
  gap: 2px;
}

.review-date {
  font-size: 0.9rem;
  color: #999;
}

.review-content {
  margin-bottom: 15px;
}

.review-content p {
  color: #333;
  line-height: 1.6;
  margin-bottom: 15px;
}

.review-images {
  display: flex;
  gap: 10px;
}

.review-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.review-image:hover {
  transform: scale(1.05);
}

.review-options {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.review-option {
  font-size: 0.9rem;
  color: #666;
  background-color: white;
  padding: 4px 12px;
  border-radius: 15px;
}

/* 加载更多评价 */
.load-more-reviews {
  text-align: center;
  margin-top: 30px;
}

.btn-load-more {
  padding: 12px 30px;
  border: 2px solid #667eea;
  background-color: white;
  color: #667eea;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-load-more:hover {
  background-color: #667eea;
  color: white;
}

/* 相关产品 */
.related-products {
  margin-bottom: 60px;
}

.related-products h3 {
  font-size: 1.5rem;
  margin-bottom: 25px;
  color: #333;
}

.related-products-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.related-product-item {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.related-product-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.related-product-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.related-product-image {
  height: 150px;
  overflow: hidden;
  background-color: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
}

.related-product-image img {
  max-width: 100%;
  max-height: 120px;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.related-product-item:hover .related-product-image img {
  transform: scale(1.05);
}

.related-product-info {
  padding: 15px;
}

.related-product-name {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: #333;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.related-product-price {
  font-size: 1.1rem;
  font-weight: bold;
  color: #ff4757;
  margin-bottom: 5px;
}

.related-product-rating {
  display: flex;
  align-items: center;
  gap: 5px;
}

.related-product-rating svg {
  width: 12px;
  height: 12px;
}

.related-product-rating span {
  font-size: 0.9rem;
  color: #666;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .product-detail-container {
    padding: 15px;
  }
  
  .product-main-info {
    flex-direction: column;
  }
  
  .main-image-container {
    min-height: 300px;
  }
  
  .main-image {
    max-height: 300px;
  }
  
  .product-name {
    font-size: 1.6rem;
  }
  
  .current-price {
    font-size: 1.8rem;
  }
  
  .action-buttons {
    flex-direction: column;
  }
  
  .btn-primary,
  .btn-secondary {
    width: 100%;
  }
  
  .specs-table {
    grid-template-columns: 1fr;
  }
  
  .spec-key {
    min-width: auto;
    margin-right: 10px;
    margin-bottom: 5px;
  }
  
  .reviews-summary {
    flex-direction: column;
    gap: 20px;
  }
  
  .rating-distribution {
    min-width: auto;
  }
  
  .related-products-list {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}

@media (max-width: 480px) {
  .tabs-header {
    flex-wrap: wrap;
  }
  
  .tab-button {
    padding: 12px 20px;
    font-size: 0.9rem;
  }
  
  .price-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .service-guarantees {
    flex-direction: column;
    gap: 10px;
  }
  
  .related-products-list {
    grid-template-columns: 1fr;
  }
}
</style>